<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ProgressRGB</title>
</head>
<body>
	<h3>RGB</h3>
	<div style="margin-left: 20px;">
		<img id="rgb" style="width: 100px;height: 100px;background: black;margin-left: 100px;">
		<br>
		<label id="label" style="margin-left: 20px;">R:0, G:0, B:0</label>
		<div style="margin-top: 10px;">
			<label style="color: red;">R</label>
			<input class="slider" type="range" name="points" min="0" max="255" value="0"/>
		</div>
		<div style="margin-top: 10px;">
			<label style="color: green;">G</label>
			<input class="slider" type="range" name="points" min="0" max="255" value="0"/>
		</div>
		<div style="margin-top: 10px;">
			<label style="color: blue;">B</label>
			<input class="slider" type="range" name="points" min="0" max="255" value="0"/>
		</div>
	</div>

	<script type="text/javascript">
		var inputs = document.getElementsByTagName('input'),
			label = document.getElementById('label'),
			img = document.getElementById('rgb');

		for (var i = 0; i < inputs.length; i++) {
    		inputs[i].onchange = function () {
    			label.innerHTML = "R: " + inputs[0].value +", G: " + inputs[1].value + ", B: " + inputs[2].value;
      			img.style.background = "rgb(" + inputs[0].value +"," + inputs[1].value + "," + inputs[2].value+ ")";
    		}
		}
	</script>

	<style type="text/css">
		.slider {
			width: 255px;
			height: 14px;
		}
	</style>
</body>
</html>